<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
    <meta charset="UTF-8">
    <title>会员信息管理</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="//unpkg.com/vue/dist/vue.js"></script>
    <script src="//unpkg.com/element-ui@2.15.6/lib/index.js"></script>
    <style>
        @import url("//unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css");
        #main {
            position: absolute;
            width: 65%;
            height: 1px;
            top: 50px;
            left: 50%;
            transform: translate(-50%, 0);
        }
        .add {
            width: 21%;
        }
        #addbutton {
            width: 13.5%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-page-header @back="goBack" content="会员信息管理页面">
    </el-page-header>
    <div id="main">
        <template>
            <el-input class="add" placeholder="👉新增会员" disabled></el-input>
            <el-input class="add" v-model="addName" placeholder="会员昵称"></el-input>
            <el-input class="add" v-model="addPassword" show-password placeholder="会员密码"></el-input>
            <el-input class="add" v-model="addCardId" placeholder="会员卡ID（选填）"></el-input>
            <el-button id="addbutton" type="info" @click="onSubmit" plain>添加</el-button>
            <el-table
                    :data="tableData"
                    border
                    style="width: 100%">
                <el-table-column
                        prop="id"
                        label="会员ID"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="会员昵称"
                        width="230">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.name"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="cardId"
                        label="会员卡编号">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.cardId"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="id"
                        label="操作"
                        width="210">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <br/><br/><br/>
    </div>
</div>
<script th:inline="javascript">
    var Main = {
        data() {
            return {
                addName: '',
                addCardId: '',
                addPassword: '',
                tableData: JSON.parse([[${membersJson}]])
            }
        },
        methods: {
            goBack() {
                history.back();
            },
            onSubmit() {
                var name = this.$data.addName;
                var cardId = this.$data.addCardId;
                var password = this.$data.addPassword;

                axios.get('/admin/member/add', {
                    params: {
                        name: name,
                        cardId: cardId,
                        password: password
                    }
                }).then((response) => {
                    switch (response.data) {
                        case -1:
                            this.$message({
                                message: '添加失败，请重试~！',
                                type: 'error'
                            });
                            break;
                        case 0:
                            this.$message({
                                message: '必填信息不能为空~！',
                                type: 'warning'
                            });
                            break;
                        case 1:
                            this.$alert('添加成功~！', '提示', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    window.location.assign("/admin/member");
                                }
                            });
                            break;
                        case 2:
                            this.$message({
                                message: '会员卡不存在~！',
                                type: 'warning'
                            });
                            break;
                        case 3:
                            this.$message({
                                message: '已存在相同名称的会员~！',
                                type: 'warning'
                            });
                            break;
                        case 4:
                            this.$message({
                                message: '会员卡已被使用~！',
                                type: 'warning'
                            });
                            break;
                        default:
                            this.$message({
                                message: '出现问题，请重试~！',
                                type: 'warning'
                            });
                            break;
                    }
                }).catch(() => {
                    this.$message({
                        message: '出现问题，请重试~！',
                        type: 'error'
                    });
                });
            },
            handleEdit(index, row) {
                this.$confirm('确定修改该会员信息？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get('/admin/member/update', {
                        params: {
                            id: row.id,
                            name: row.name,
                            cardId: row.cardId
                        }
                    }).then((response) => {
                        switch (response.data) {
                            case -1:
                                this.$message({
                                    message: '修改失败~！',
                                    type: 'error'
                                });
                                break;
                            case 0:
                                this.$message({
                                    message: '昵称不能为空~！',
                                    type: 'warning'
                                });
                                break;
                            case 1:
                                this.$alert('修改成功~！', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        window.location.assign("/admin/member");
                                    }
                                });
                                break;
                            case 2:
                                this.$message({
                                    message: '会员卡不存在~！',
                                    type: 'error'
                                });
                                break;
                            case 3:
                                this.$message({
                                    message: '会员卡已被使用~！',
                                    type: 'warning'
                                });
                                break;
                            default:
                                this.$message({
                                    message: '出错了，请重试~！',
                                    type: 'warning'
                                });
                                break;
                        }
                    }).catch((error) => {
                        this.$message({
                            message: '出错了，请重试~！',
                            type: 'warning'
                        });
                    });
                });
            },
            handleDelete(index, row) {
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.get('/admin/member/delete', {
                        params: {
                            id: row.id,
                        }
                    }).then((response) => {
                        switch (response.data) {
                            case 0:
                                this.$message({
                                    message: '删除失败~！',
                                    type: 'error'
                                });
                                break;
                            case 1:
                                this.$alert('删除成功~！', '提示', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        window.location.assign("/admin/member");
                                    }
                                });
                                break;
                            default:
                                this.$message({
                                    message: '出错了，请重试~！',
                                    type: 'warning'
                                });
                                break;
                        }
                    }).catch((error) => {
                        this.$message({
                            message: '出错了，请重试~！',
                            type: 'warning'
                        });
                    });
                });
            }
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app');
</script>
</body>
</html>